
import React, { Component,createRef } from 'react'
import {getData} from '../../api/dashboard'
import echarts from 'echarts'
export default class Notifications extends Component {
  colRef=createRef()
  state={
    chinaTotal:{},
    lastlastUpdateTime:''

  }
  componentDidMount () {
    getData().then(res=>{
      const data = JSON.parse(res.data.data)
      console.log(data)
      this.setState({
        chinaTotal:data.chinaTotal,
        lastlastUpdateTime:data.lastUpdateTime
      })
      const {confirm,heal,dead,suspect,importedCase,nowConfirm,nowSevere} =this.state.chinaTotal
      this.drawPie({confirm,heal,dead,suspect,importedCase,nowConfirm,nowSevere})
    })
  }
  drawPie=({confirm,heal,dead,suspect,importedCase,nowConfirm,nowSevere})=>{
    var myCol = echarts.init(this.colRef.current)
    myCol.setOption({
      title: {
        text: '中国疫情概览',
        subtext: '数据来源腾讯：this.state.lastlastUpdateTime',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} '
    },
    xAxis: {
      type: 'category',
      data: ['累计确诊', '累计治愈', '累计死亡', '累计疑似', '境外输入', '现有确诊', '现有重症']
     },
    yAxis: {
      type: 'value'
    },
    series: [{
      name:'疫情概览',
      data: [confirm,heal,dead,suspect,importedCase,nowConfirm,nowSevere],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
          color: 'rgba(220, 220, 220, 0.8)'
      }
  }]
    
    })
  }
  render () {
    return (
      <div ref={this.colRef} style={{width:'800px',height:'600px'}}></div>
    )
  }
}
